<template>
  <transition name="van-fade">
    <div
      v-if="show"
      class="c-choose-cate"
      :style="
        'margin-top:' +
          paddingTop +
          'px;height:calc(100% - ' +
          paddingTop +
          'px);'
      "
    >
      <van-nav-bar @click-left="doClose" title="选择圈子" left-arrow />
      <van-tree-select
        :items="cateList"
        :active-id.sync="active"
        :main-active-index.sync="activeIndex"
        @click-nav="changeNav"
        @click-item="changeItem"
      />
    </div>
  </transition>
</template>

<script>
export default {
  name: "choose-cate",
  props: ["visiable", "close", "change", "leftChange"],
  data() {
    return {
      show: this.visiable,
      active: "",
      activeIndex: 0,
      cateList: [
        {
          text: "视频",
          children: [
            { text: "国产视频", id: "国产视频" },
            { text: "欧美视频", id: "欧美视频" },
            { text: "日韩视频", id: "日韩视频" },
            { text: "另类视频", id: "另类视频" },
            { text: "动漫视频", id: "动漫视频" }
          ]
        },
        {
          text: "图片",
          children: [
            { text: "自拍私照", id: "自拍私照" },
            { text: "爆乳美腿", id: "爆乳美腿" },
            { text: "艺术美照", id: "艺术美照" },
            { text: "另类图片", id: "另类图片" },
            { text: "成人漫画", id: "成人漫画" }
          ]
        },
        {
          text: "短文",
          children: [
            { text: "都市激情", id: "都市激情" },
            { text: "人妻女友", id: "人妻女友" },
            { text: "乱伦生活", id: "乱伦生活" },
            { text: "校园情色", id: "校园情色" },
            { text: "武侠玄幻", id: "武侠玄幻" },
            { text: "暴力另类", id: "暴力另类" }
          ]
        }
      ],
      paddingTop: 0
    };
  },
  watch: {
    visiable() {
      this.show = this.visiable;
    }
  },
  methods: {
    doClose() {
      this.show = false;
      this.$emit("close");
    },
    changeNav(index) {
      this.activeIndex = index;
      this.$emit("leftChange", index);
    },
    changeItem(data) {
      this.show = false;
      this.$emit("change", data.text);
      this.$emit("close");
    }
  },
  created() {
    this.paddingTop = window.sessionStorage.getItem("paddingTop");
  }
};
</script>

<style lang="less">
.c-choose-cate {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: #fff;
  .van-nav-bar__title {
    font-weight: bold;
  }
  .van-tree-select {
    height: calc(100% - 50px) !important;
  }
}
</style>
